<template>
	<view style="padding: 16rpx;">
		<u-subsection
			:list="sectionList"
			mode="button"
			:current="currentIndex"
			@change="sectionChange"
		></u-subsection>
		<view>
			<view class="card-container" v-if="itemList.length > 0">
				<!-- 每一个折叠卡片的事件在这里 -->
				<uni-collapse accordion v-model="multiCollaspe" @change="changeDetail">
					<view v-for="(item, index) in itemList"
					class="card-wrap"
					:key="index">
						<view class="card-item">
							审批类型：
							<u--text :text="item.flowName" type="info"></u--text>
						</view>
						<view class="card-item">
							申请时间：
							<u--text :text="item.createTime" type="info"></u--text>
						</view>
						<view class="card-item">
							审批内容：
							<u--text :text="`${item.flowRemark}`" style="color: aquamarine;"></u--text>
						</view>
						<view class="card-item">
							<u-row>
								<u-col span="4">申 请 人：</u-col>
								<u-col span="4" style="margin-right: 1px;">
									<u--text :text="`${item.creator == '' || item.creator == null ? '--' : item.creator}`" type="info"></u--text>
								</u-col>
								<u-col span="4">审批状态</u-col>
								<u-col span="4" style="margin-left: 2px;">
									<u-tag text="审核中" v-if="item.flowStatus==='PENDING'"></u-tag>
									<u-tag text="审核通过" v-else-if="item.flowStatus==='PASS'" type="success"></u-tag>
									<u-tag text="审核拒绝" v-else-if="item.flowStatus==='REJECT'" type="error"></u-tag>
									<u-tag text="-" v-else></u-tag>
								</u-col>
							</u-row>
						</view>
						<!-- <view class="card-item">
							<u--text type="primary" prefixIcon="/static/submit/number.png" size="16" 
							:text="`订单总数: ${item.workorderNum}`"></u--text>
							<u--text color="#1ee684"  prefixIcon="/static/submit/finished.png" size="16" 
							:text="`累计完工数: ${item.hasCompletionNum?item.hasCompletionNum:0}`"></u--text>
						</view> -->
						
						<view class="card-item" v-if="currentIndex != 2 && item.flowStatus != 'PASS' && item.flowStatus != 'REJECT'">
							<u-button text="开始审批" size="normal" type="primary" @click="goToAudit(item)"></u-button>
						</view>
						<view class="card-item" v-else>
							<u-button text="查看详情" size="normal" type="primary" @click="goToDetail(item)"></u-button>
						</view>
					</view>
				</uni-collapse>
			</view>
			<view v-if="itemList.length == 0" style="padding-top: 60px;">
				<u-loading-icon text="数据加载中" textSize="18" color="#19be6b" :show="loadingShow"></u-loading-icon>
				<u-empty mode="data" v-if="!loadingShow"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	
import * as workorderApi from '@/api/order/workorder';

export default {
  data () {
    return {
		currentIndex: 0,
		sectionList: ['待审核', '已审核', '我发起的'],
		
		multiCollaspe: "",
		loadingShow: false,
		
		itemList: [
		// {
		// 	createTime: '2025-01-05 09:37:00',
		// 	flowName: '补料审批流',
		// 	flowStatus: 'PENDING',
		// 	flowRemark: '退料申请，需要您审批，请及时处理',
		// 	creator: '杨志',
		// 	businessId: '1114SCLLD00001',
		// },
		],
    }
  },
  created () {
	  if (this.currentIndex === 0) {
	  	this.queryApplyFlows('PENDING');
	  } else if (this.currentIndex === 1) {
	  	this.queryApplyFlows('PASS');
	  } else if (this.currentIndex === 2) {
	  	this.queryMineFlows();
	  }
  },
  methods: {
	queryMineFlows() {
		const params = {
		};
		this.itemList = [];
		workorderApi.queryMineFlowList(params).then(res => {
			if (res && res.data) {
				this.itemList = res.data || [];
			} else {
				this.itemList = [];
			}
		}).catch(err => {
			this.itemList = [];
			// 提交异常
			console.error("查找审批流数据发生异常", err);
			this.notifyError(`查找审批流数据发生异常！请稍后重试`);
		});
	},
	queryApplyFlows(flowStatus) {
		const params = {
			flowStatus: flowStatus,
		};
		this.itemList = [];
		workorderApi.queryApplyFlowList(params).then(res => {
			if (res && res.data) {
				this.itemList = res.data || [];
			} else {
				this.itemList = [];
			}
		}).catch(err => {
			this.itemList = [];
			// 提交异常
			console.error("查找审批流数据发生异常", err);
			this.notifyError(`查找审批流数据发生异常！请稍后重试`);
		});
	},
	sectionChange(index) {
		this.currentIndex = index;
		if (this.currentIndex === 0) {
			this.queryApplyFlows('PENDING');
		} else if (this.currentIndex === 1) {
			this.queryApplyFlows('PASS');
		} else if (this.currentIndex === 2) {
			this.queryMineFlows();
		}
		console.log("currentIndex", this.currentIndex);
	},
	goToAudit(item) {
		const transferNo = encodeURIComponent(item.businessId);
		const flowNo = encodeURIComponent(item.flowNo);
		this.navigateTo(`/pages/audit/apply?transferNo=${transferNo}&flowNo=${flowNo}`);
	},
	goToDetail(item){
		const transferNo = encodeURIComponent(item.businessId);
		const flowNo = encodeURIComponent(item.flowNo);
		this.navigateTo(`/pages/audit/apply?transferNo=${transferNo}&flowNo=${flowNo}`);
	},
	changeDetail(e){
	},
	navigateTo (url) {
	  uni.navigateTo({ url: url })
	},
    // 加载日志列表数据
    loadData () {
      const app = this
      // 首先获取当前登录账号信息
      app.$store.dispatch('Info').then(res => {
        app.params.pageNum += 1
        if (res.user) {
          // 只查询当前用户的操作日志
          app.params.operName = res.user.userName
        }
        LogApi.operLog(app.params).then(res => {
          app.logList = app.logList.concat(res.rows);
        })
      })
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/.u-cell__body {
  // padding: 6px 0 !important;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 6px 8px !important;
  font-size: 15px;
  color: #303133;
  align-items: center;
}
.card-container{
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	padding: 10rpx;
	background-color: #ECECEC;
}
.card-wrap{
	padding: 12rpx;
	border-radius: 12rpx;
	margin-bottom: 12rpx;
	background-color: #FFF;
	border: 1px solid #ddd; /* 默认边框 */
	transition: background-color 0.3s, border-color 0.3s;
	.card-item{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		padding-left: 6rpx;
		padding-bottom: 18rpx;
		color: #40485d;
	}
	.card-item-txt{
		flex:1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
.card-btns{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.card-btns uni-button {
  flex: 1;
  margin: 0 5px; /* 调整按钮间距 */
}
.card-wrap-selected {
  border-color: #007bff; /* 选中状态的边框颜色 */
  background-color: #e7f0ff; /* 选中状态的背景颜色 */
}
.gridcell {
  border: 1px solid #ddd;
  text-align: center;
  line-height: 20px; /* Adjust line-height to match height */
  height: 30px; /* Set height to 20px */
  background-color: #f9f9f9;
  font-size: 14px; /* Adjust font-size to fit */
  overflow: hidden; /* Hide overflow if text is too large */
}
.card-item-single{
	border-radius: 6rpx;
	background-color: #FFF;
	border: 1px solid #ddd; /* 默认边框 */
	transition: background-color 0.3s, border-color 0.3s;
	align-items: left;
	font-size: 30rpx;
	color: #40485d;
}

.submit {
	// background-color: #007cff;
	text-align: center;
	margin: 5px 15px 5px 5px;
}

.demo-layout {
	height: 25px;
	border-radius: 4px;
}
.bg-purple {
	background: #CED7E1;
}
.bg-purple-light {
	background: #e5e9f2;
}


.flex-item {
	width: 33.3%;
	height: 200rpx;
	text-align: center;
	line-height: 200rpx;
}

.flex-item-V {
	width: 100%;
	height: 150rpx;
	text-align: center;
	line-height: 150rpx;
}

.text {
	margin: 15rpx 10rpx;
	padding: 0 20rpx;
	background-color: #ebebeb;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	color: #777;
	font-size: 26rpx;
}

.desc {
	/* text-indent: 40rpx; */
}
.flex-pc {
	display: flex;
	justify-content: center;
}
</style>